<template>
	<uni-popup ref="popup" background-color="#fff" @maskClick="maskClick">
		<view class="popup-content">
			<view class="midTitle">选择上报单位</view>
			<view class="popupContentIfo">
				<view class="popupCheckList" v-for="(item,index) in institutionListData" :key="index">
					<view class="popupCheckItem" @click="upTo(item.institutionId)">
						<view class="popupCheckTitle">
							<view class="left">
								{{item.name}}
							</view>
							<image src="@/static/images/d2.png" class="checktt"></image>
						</view>
						<view class="middle">
							<image src="@/static/images/d1.png" class="checktt" style="margin-right: 8rpx;">
							</image>
							{{item.areaName}}
						</view>
						<view class="bottom">
							<view class="bottomItem">
								单位类型：<text class="bottomType">{{item.institutionType}}</text>
							</view>
							<!-- 		<view class="bottomItem">
								所属行业：<text class="bottomType">{{ item.industryName}}</text>
							</view> -->
						</view>
					</view>
				</view>

			</view>
		</view>
	</uni-popup>
</template>
<script setup>
	import {
		onMounted,
		reactive,
		ref,
		watch
	} from "vue";
	import {
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		institutionList
	} from "@/api/unitsList.js"
	const props = defineProps({
		pageType: {
			type: Boolean,
			default: false,
		},
	});
	const popup = ref(null)
	// 同步外部传入的值到内部ref
	watch(
		() => props.pageType,
		(newValue) => {
			popup.value.open('center')
			getCheckInfo()
		}
	);
	/**
	 * @Description:目标跳转
	 * @returns
	 */
	const upTo = async (id) => {
		uni.navigateTo({
			url: '/pages/checkReport/checkReport?institutionId=' + id
		});
	}
	const maskClick = async () => {
		console.log(21111111111111);
		popup.value.close()
		props.pageType = false
	}
	const institutionListData = ref([])
	const submitDate = ref({
		pageNum: 1, //页数
		pageSize: 5 //每页条数
	})
	const total = ref(0) //数据总条数
	const getCheckInfo = async () => {
		const res = await institutionList({
			pageNum: submitDate.value.pageNum,
			pageSize: 5
		})
		console.log("列表数据", res);
		if (res.code == 200) {
			institutionListData.value = res.rows
			total.value = res.total
		}
	}
	//触底加载更多
	onReachBottom(() => {
		console.log("触底了");
		// 加判断： 页码数 * 每一页获取数据的条数 >= 总条数，如果符合条件说明数据已经全部加载完毕
		// console.log('params.pageNum * params.pageSize >= total.value', params.pageNum * params.pageSize >= total
		// 	.value)
		// if (params.pageNum * params.pageSize >= total.value) {
		// 	uni.showToast({
		// 		title: '已经到底咯~',
		// 		icon: 'none',
		// 	});
		// 	return;
		// } else {
		// 	params.pageNum++; // 每触发一次触底事件，页码加1
		// 	getcheckList(false);
		// }
	});
</script>

<style lang="scss" scoped>
	.popup-content {
		width: 100%;
		height: 66vh;
		background-color: #FAFAFA;
		border-radius: 20rpx;

		.popupContentIfo {
			width: 100%;
			height: calc(100% - 110rpx);
			overflow: auto;
		}

		.midTitle {
			text-align: center;
			line-height: 86rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
		}

		.popupCheckList:first-child {
			margin-top: 0rpx;
		}

		.popupCheckList {
			width: 92%;
			height: 15vh;
			margin: auto;
			// border: 1px solid red;
			background-color: rgba(255, 255, 255, 0.9);
			box-shadow: 0px 0px 30px 0px rgba(70, 136, 211, 0.1);
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;


			.popupCheckItem {
				width: 93%;
				height: 86%;

				.popupCheckTitle {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #EEEEEE;
					height: 60rpx;

					.left {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #333333;
					}
				}

				.middle {
					font-family: PingFang SC;
					font-size: 28rpx;
					color: #333333;
					margin-top: 13rpx;
					line-height: 50rpx;
				}

				.bottom {
					display: flex;
					justify-content: space-between;

					.bottomItem {
						// width: 50%;
						font-family: PingFang SC;
						font-size: 28rpx;
						color: #666666;
						line-height: 50rpx;
						// border: 1px solid red;
						// overflow: hidden;
						// text-overflow: ellipsis;
						// white-space: nowrap;

						.bottomType {
							font-family: PingFang SC;
							font-size: 28rpx;
							color: #333333;


						}
					}
				}

				.checktt {
					width: 26rpx;
					height: 30rpx;
				}
			}
		}
	}
</style>